// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Palette, ListView, HorizontalBox } from "std-widgets.slint";
import { UsecasesPalette } from "styling.slint";
import { Icon } from "icon.slint";

export component NavigationListItem {
    callback select <=> touch-area.clicked;

    in property <bool> selected;
    in property <string> title <=> text.text;
    in property <string> message <=> message.text;
    in property <image> icon <=> icon.source;


    property <brush> foreground: Palette.foreground;
    property <length> style-min-height: UsecasesPalette.use-material ? 56px : 41px;

    min-height: max(root.style-min-height, layout.min-height);

    layout :=  HorizontalLayout {
        padding-bottom: 8px;

        background := Rectangle {
            border-radius: UsecasesPalette.use-material ? 26px : 16px;

            HorizontalLayout {
                padding-left: 16px;
                padding-right: 16px;

                spacing: 8px;

                icon := Icon {
                    y: (parent.height - self.height) / 2;
                    colorize: root.foreground;
                }

                text := Text {
                    color: root.foreground;
                    horizontal-stretch: 1;
                    vertical-alignment: center;
                    font-size: 14px;
                    font-weight: 600;
                }

                message := Text {
                    color: root.foreground;
                    horizontal-stretch: 0;
                    vertical-alignment: center;
                    font-size: 14px;
                    font-weight: 600;
                }
            }

            touch-area := TouchArea {}
        }
    }

    states [
        selected when root.selected : {
            background.background: UsecasesPalette.state-selected;
            foreground: UsecasesPalette.accent-text;
        }
    ]
}

export struct NavigationListViewItem {
    icon: image,
    text: string,
    message: string,
}

export component NavigationListView inherits ListView {
    in property <[NavigationListViewItem]> model;
    in-out property <int> current-item: -1;

    callback selected(/* current-item */ int);

    for item[index] in root.model : NavigationListItem {
        height: self.min-height;
        title: item.text;
        icon: item.icon;
        message: item.message;
        selected: index == root.current-item;

        select => {
            root.current-item = index;
            selected(root.current-item);
        }
    }
}
